<div>
    <div class="pannel">
        <div class="pannel-head">
            <p>
                <span class="title">日志管理</span>
            </p>
        </div>
        <div class="pannel-body">
            <div class="pannel-filter">
                <div class="pannel-filter-left">
                    <nz-select style="width: 120px" [(ngModel)]="pages.logType" (ngModelChange)="changeFilter()">
                        <nz-option nzValue="" nzLabel="全部"></nz-option>
                        <nz-option nzValue="Device" nzLabel="设备类"></nz-option>
                        <nz-option nzValue="Interface" nzLabel="接口类"></nz-option>
                        <nz-option nzValue="Permission" nzLabel="权限类"></nz-option>
                        <nz-option nzValue="Collection" nzLabel="采集类"></nz-option>
                    </nz-select>
                    <span>采集时间</span>
                    <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" [nzDisabledDate]="isSelectedDate"></nz-range-picker>
                </div>
                <div class="pannel-filter-right">
                    <nz-input-group [nzSuffix]="suffixIconSearch">
                        <input type="text" nz-input [(ngModel)]="pages.content" placeholder="请输入搜索条件" />
                    </nz-input-group>
                    <ng-template #suffixIconSearch>
                        <a (click)="changeFilter()"><i nz-icon type="search"></i></a>
                    </ng-template>
                </div>
            </div>
            <div>
                <nz-table
                    class="pannel-body-table"
                    #nzTable
                    [nzData]="dataList"
                    [nzShowPagination]="true"
                    [nzLoading]="tableLoading"
                    [nzFrontPagination]="false"
                    [nzPageIndex]="pages.pageNo"
                    [nzTotal]="pages.total"
                    [nzPageSize]="pages.pageSize"
                    [nzPageSizeOptions]="[10,20,30,40,50]"
                    [nzShowQuickJumper]="true"
                    [nzShowSizeChanger]="true"
                    [nzShowTotal]="totalTemplate"
                >
                    <thead>
                        <tr>
                            <th nzWidth="180px">日期</th>
                            <th nzWidth="240px">消息</th>
                            <th nzWidth="80px">日志ID</th>
                            <th>日志类型</th>
                            <th>日志源</th>
                            <th>步骤名称</th>
                            <th>持续时间</th>
                            <th nzWidth="60px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of dataList">
                            <td>{{ data.createTime }}</td>
                            <td>{{ data.content }}</td>
                            <td>{{ data.id }}</td>
                            <td>
                                <span>{{ getTypeName(data.type) }}</span>
                            </td>
                            <td>{{ data.logFrom }}</td>
                            <td>{{ data.stepName }}</td>
                            <td>{{ data.lastTime }}</td>
                            <td><a><img src="../../../../assets/img/cz-detail.png" /></a></td>
                        </tr>
                    </tbody>
                </nz-table>
                <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template>
            </div>
        </div>
    </div>
</div>
